<!-- 20210301 -->
<template>
	<view class="layer-attach-service-cn">

		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 浮层 -->
			<ty-layer-pop-up v-if="show" @overlayClick="close">
				<!-- 浮层内容 -->
				<view class="layer-content bg-ff" @click.stop="">
					<view class="padding-top-40">
						<!-- 标题 -->
						<view class="flex align-center justify-center line-height-50">
							<text class="tyIcon-safe text-32 text-main"></text>
							<text class="margin-left-10 text-36 text-bold">服务保障</text>
						</view>

						<!-- 服务保障 -->
						<scroll-view class="scroll-view" scroll-y>
							<view class="padding-lr-40 margin-tb-25" v-for="(item,index) in list" :key="index">
								<!-- 图标和标题 -->
								<view class="flex align-center">
									<image class="jc-image" style="width: 40rpx;height: 40rpx;" :src="item.icon"
										mode="aspectFit"></image>
									<view class="margin-left-10 text-28 text-bold text-33">{{item.name}}</view>
								</view>
								<!-- 简介 -->
								<view class="margin-top-15 margin-left-50 line-40 text-28 text-aa">
									{{item.brief}}
								</view>
							</view>
						</scroll-view>

						<!-- 底部按钮 -->
						<view class="padding-bottom-safe padding-lr-30 bg-ff">
							<view class="line-height-90 margin-tb-10 radius-45 bg-main text-center text-32 text-ff"
								@click="close">
								好的
							</view>
						</view>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否显示该浮层
			show: {
				type: Boolean,
				default: false
			},
			// 服务保障列表
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			/**
			 * 关闭浮层
			 */
			close() {
				this.$emit("update:show", false)
			},
		}
	}
</script>

<style scoped>
	/* page {
		touch-action: none;
	} */

	/* 浮层内容区域 */
	.layer-content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		/* z-index: 1001; */
	}

	/* 服务保障列表 */
	.scroll-view {
		width: 100%;
		max-height: calc(90vh - 110rpx - 130rpx);
	}
</style>